<template>
	<view class="flex category-box">
		<view class="left-box">
			<view class="category-item" v-for="(item, index) in cateList" :key="index"
				:class="{active:cateIndex === index}" @click="categoryBtn(index)">
				{{item.name}}
			</view>
		</view>
		<view class="right-box">
			<view class="goods-item" v-for="i in 12" :key="i">
				<image src="@/static/images/logo1.jpg" class="goods-img" mode=""></image>
				<view class="mt-8 text-center fs-24">
					霸王茶纪
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateList:[{name:'精选商品'},{name:'综合'},{name:'女装'},{name:'男装'},{name:'家装'}],
				cateIndex:0,
			}
		},
		onLoad() {
	
		},
		methods: {
			categoryBtn(index){
				this.cateIndex = index;
			}
		}
	}
</script>

<style lang="scss">
	.category-box{
		border-top:1rpx solid #efefef;
		
		.left-box{
			width:180rpx;
			.category-item{
				padding:20rpx 12rpx;
				padding-left:30rpx;
				border-bottom: 1rpx solid #EFEFEF;
				font-size: 26rpx;
				background-color: #FAFAFA;
				
				&.active{
					position: relative;
					background-color: #FFFFFF;
					
					&::after{
						content: "";
						display: block;
						position: absolute;
						width:8rpx;
						height: 100%;
						border-radius: 0 2rpx 2rpx 0;
						top:50%;
						left:0;
						transform: translateY(-50%);
						background-color: #ef0000;
						
					}
				}
				
			}
		}
		.right-box{
			flex:1;
			display: flex;
			flex-wrap: wrap;
			padding:16rpx 16rpx;
			padding-left: 26rpx;
			border-left:1rpx solid #EFEFEF;
			
			.goods-item{
				border-radius: 20rpx;
				box-shadow:0px 2px 5px #DCDCDF;
				// border:1rpx solid #FAFAFA;
				width:150rpx;
				margin-bottom:30rpx;
				padding:12rpx 0;
				
				
				&:nth-child(3n+2){
					margin-left:29rpx;
					margin-right:29rpx;
				}
			}
			
			.goods-img{
				width:104rpx;
				height: 104rpx;
				border-radius: 50%;
				display: block;
				margin:0 auto;
				border:1rpx solid #efefef;
			}
			
		}
	
	}
</style>